<template>
  <div class="user-box" @click.stop="toUserDetail">
    <el-avatar shape="square" size="default" :src="avatar" />
    <div class="user-box-right">
      <div class="user-box-name te">{{ nickName }}</div>
    </div>
  </div>
  <userDetail
    ref="userDetailRef"
    v-if="detailStatus"
    :id="`userDetail_${props.id}`"
    @close="closeUserDetail"
  ></userDetail>
</template>
<script lang="ts">
export default {
  name: "userBox",
};
</script>

<script lang="ts" setup>
import { getCurrentInstance, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import userDetail from "@/components/user/detail.vue";

const router = useRouter();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    id?: number | string;
    avatar?: string;
    nickName?: string;
    phone?: string;
  }>(),
  {
    id: "",
    avatar: "",
    nickName: "",
    phone: "",
  }
);

const userDetailRef = ref<HTMLElement>();

const detailStatus = ref<boolean>(false);

// 查看详细
const toUserDetail = () => {
  detailStatus.value = true;
  nextTick(() => {
    proxy?.$refs["userDetailRef"]?.open(props.id);
  });
};

const closeUserDetail = () => {
  detailStatus.value = false;
};
</script>
  <style scoped>
.user-box {
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  width: 160px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.user-box-right {
  width: 120px;
  margin-left: 10px;
  user-select: none;
}
.user-box-name {
  width: 110px;
}
</style>